{% load i18n %}
<div id="{{ model_name }}_fluid" class="layui-fluid">
    <div class="layui-row layui-col-space15" style="margin-bottom: 0px">
        <div class="layui-col-md2">
            <div id="{{ model_name }}-tree-container" class="layui-card">
                <div id="{{ model_name }}-dept-tree-control" class="layui-card-header"
                     style="background-color: #f2f2f2">
          <span class="" name="all"><a href="javascript:void(0);" title="{% trans 'department_tree_selectAll' %}"><i
                  class="fa fa-fw fa-check-square-o"></i></a></span>
                    <span class="selected" name="mul"><a href="javascript:void(0);"
                                                         title="{% trans 'department_tree_multipleSelect' %}"><i
                            class="fa fa-fw fa-list"></i></a></span>
                    <span name="sub"><a href="javascript:void(0);"
                                        title="{% trans 'department_tree_selectSubDepartment' %}"><i
                            class="fa fa-fw fa-sitemap"></i></a></span>
                </div>
                <div class="layui-card-body">
                    <ul id="{{ model_name }}-tree" class="ztree ztree-pure" style="overflow-y: auto"></ul>
                </div>
            </div>
        </div>
        <div class="layui-col-md10">
            <div class="layui-card">
                <div class="layui-card-header" style="background-color: #ffffff;display: contents;">
                    <form id="{{ model_name }}-search-form" action=""
                          class="layui-form fixed-search-form att-report-search-form">
                        {% csrf_token %}
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label for=""
                                       class="layui-form-label">{% trans 'report_searchField_startDate' %}</label>
                                <div class="layui-input-inline">
                                    <input id="{{ model_name }}-start-date" type="text" name="start_date"
                                           lay-verify="required"
                                           autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label for="" class="layui-form-label">{% trans 'report_searchField_endDate' %}</label>
                                <div class="layui-input-inline">
                                    <input id="{{ model_name }}-end-date" type="text" name="end_date"
                                           lay-verify="required"
                                           autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            {% block extra_search_field %}
                            {% endblock %}
                            <div class="layui-inline" id="{{ model_name }}_search_employee">
                                <label for="" class="layui-form-label">{% trans 'report_searchField_employee' %}</label>
                                <div class="layui-input-inline">
                                    <div class="layui-form-select">
                                        <div class="layui-select-title">
                                            <input id="{{ model_name }}-employee" type="text" autocomplete="off"
                                                   class="layui-input" readonly>
                                            <i id="{{ model_name }}-employee-select" class="layui-edge"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-inline" id="{{ model_name }}_search_timetable">
                                <label for=""
                                       class="layui-form-label">{% trans 'report_searchField_timetable' %}</label>
                                <div class="layui-input-inline">
                                    <select name="time_table" id="{{ model_name }}RequestTimetable">
                                        <option value="">{% trans '----------' %}</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <div class="button-3d" lay-submit=""
                                     lay-filter="{{ model_name }}-search">
                                    <i class="fa fa-fw fa-search"></i>
                                </div>
                            </div>
                        </div>
                        <div class="layui-hide"><input id="{{ model_name }}-selected-emp-container" type="hidden"></div>
                        <div class="layui-hide"><input id="{{ model_name }}SelectedEmployeeDetail" type="hidden"></div>
                    </form>
                </div>
                <table id="id_grid_{{ model_name }}" class="layui-hide" lay-filter="{{ model_name }}"></table>
                <script type="text/html" id="{{ model_name }}_toolbar">
                    <div class="layui-btn-container grid-toolbar" style="">
                        <ul class="layui-nav"></ul>
                    </div>
                </script>
            </div>
        </div>
    </div>
</div>
<script>
    $(function () {
        var opts = {
            id: "id_grid_{{ model_name }}"
            , elem: "#id_grid_{{ model_name }}"
            , cellMinWidth: 80
            , height: 'full-180'
            , page: {
                layout: ['refresh', 'limit', 'prev', 'page', 'next', 'count', 'skip']
                , curr: 1
                , limits: [20, 50, 80, 100, 200, 500]
                , limit: 20
            }
            , method: 'get'
            , toolbar: '#{{ model_name }}_toolbar'
            , defaultToolbar: []
            , smartReloadModel: true
            , request: {
                pageName: 'page',
                limitName: 'page_size'
            }
            , text: {
                none: gettext("none_data")
            }
            , done: function (res, curr, count) {
                //this.where = {page:{curr:curr}};
                setTimeout(function () {
                    $.fn.trigger_action_auto(opts.model, 'fit');
                }, 10);
                var height = $("#{{ model_name }}_fluid div.layui-table-view").height();
                $("#{{ model_name }}-tree-container").height(height);
                $("#{{ model_name }}-tree").height(height - 5);
            }
        };
        layui.use(['table', 'form', 'element', 'laydate', 'tablePlug'], function () {
            var table = layui.table, form = layui.form, laydate = layui.laydate, tablePlug = layui.tablePlug,
                element = layui.element;
            tablePlug.smartReload.enable(true);
            form.render();
            {% block search_form_init %}
                var date = new Date();
                var _start = date.getFullYear() + '-' + leftInsertZero(date.getMonth() + 1) + '-01';
                var _end = date.getFullYear() + '-' + leftInsertZero(date.getMonth() + 1) + '-' + leftInsertZero(date.getDate());
                var startDate = laydate.render({
                    elem: '#{{ model_name }}-start-date',
                    type: 'date',
                    value: _start,
                    done: function (value, date) {
                        endDate.config.min = {
                            year: date.year,
                            month: date.month - 1,
                            date: date.date
                        };
                    }
                });
                var endDate = laydate.render({
                    elem: '#{{ model_name }}-end-date',
                    type: 'date',
                    value: _end,
                    done: function (value, date) {
                        startDate.config.max = {
                            year: date.year,
                            month: date.month - 1,
                            date: date.date
                        };
                    }
                });
                $.extend(opts, {where: {start_date: _start, end_date: _end}});
            {% endblock %}
            {% block opts_modify %}
                $.extend(opts, {});
            {% endblock %}
            {% autoescape off %}
                var colIndex = {};
                var all_fields = [];
                opts.cols[0].forEach(function (col, index) {
                    colIndex[col.field] = index;
                    all_fields.push(col.field)
                });
                var hidden_fields = {{ hidden_fields }};
                var ordered_fields = {{ ordered_fields }};

                all_fields.forEach(function (col) {
                    var flag = hidden_fields.indexOf(col) > -1 ? true : false;
                    var index = colIndex[col]
                    if (opts.cols[0][index] != undefined) {
                        if (flag) {
                            opts.cols[0][index].hide = true;
                        } else {
                            opts.cols[0][index].hide = false;
                        }
                    }
                });

                if (ordered_fields.length > 0) {
                    var cols = [];
                    ordered_fields.forEach(function (col) {
                        cols.push(opts.cols[0][colIndex[col]]);
                    });
                    opts.cols[0] = cols
                }
                var valid_col = [];
                opts.cols[0].forEach(function (col) {
                    if (col != undefined) {
                        valid_col.push(col)
                    }
                });
                if (valid_col) {
                    opts.cols[0] = valid_col
                }
                var tb = table.render(opts);
                var zTree = null;
                {% block report_export_url %}
                    var url = '/att/api/{{ model_name }}/export/';
                {% endblock %}
                var action_opts = {
                    container: "#{{model_name}}_fluid",
                    actionContainer: "#{{model_name}}_fluid" + " div.grid-toolbar",
                    model: "{{model_name}}",
                    table: table,
                    tableId: "id_grid_{{model_name}}",
                    form: form,
                    element: element,
                    curTable: tb,
                    grid_opts: opts,
                    actions: "",
                    export_url: url,
                    column_order_url: '/column_order/',
                    disabled_fields_url: "/disabled_fields/",
                    init_disabled_fields: hidden_fields,
                    dimension: {height: "auto", width: "auto"},
                    disabled_action_panel_east: ["history"],
                    prefer_best_fit_op: 'best_fit',
                    callback: {}
                    , csrf_token: "{{ csrf_token }}"
                };
                $("#{{model_name}}_fluid" + " div.grid-toolbar").actions(action_opts);
            {% endautoescape %}
            function refreshReport(searchType) {
                //opts.page.curr = 1;
                //table.render(opts);
                var startDate = $("#{{ model_name }}-search-form input[name='start_date']").val();
                var endDate = $("#{{ model_name }}-search-form input[name='end_date']").val();
                var timeTable = $("#{{ model_name }}RequestTimetable").val();
                if (startDate === "") {
                    layer.msg(gettext("start_date_is_empty"));
                    return false;
                }
                if (endDate === "") {
                    layer.msg(gettext("end_date_is_empty"));
                    return false;
                }
                var c = {start_date: startDate, end_date: endDate, time_table: timeTable};
                if (searchType === 'd') {
                    $("#{{ model_name }}-selected-emp-container").val('-1');
                    $("#{{ model_name }}-employee").val("");
                }

                var nodes = zTree.getCheckedNodes(true);
                var deptID = [];
                nodes.forEach(function (item) {
                    deptID.push(item.id);
                });
                if (deptID.length === 0) {
                    deptID.push(-1);
                }
                c["departments"] = deptID.join(',');

                var emps = $("#{{ model_name }}-selected-emp-container").val();
                c["employees"] = emps;
                {% block extra_search_field_submit %}
                {% endblock %}
                {% block columns_modify %}
                    tb = table.reload(tb.config.id, {where: c, page: {curr: 1}});
                    $.extend(action_opts, {
                        curTable: tb
                    });
                    $("#{{model_name}}_fluid" + " div.grid-toolbar").actions(action_opts);
                {% endblock %}
                form.on("submit({{ model_name }}-search)", function (data) {
                    refreshReport('');
                });
            }

            function onClick(event, treeId, treeNode) {
                zTree.checkNode(treeNode, !treeNode.checked, false, false);
                refreshReport('d');
            }

            function onCheck(event, treeId, treeNode) {
                refreshReport('d');
            }

            function department_tree() {
                var setting = {
                    view: {
                        dblClickExpand: false,
                        showIcon: false,
                        showLine: true
                    },
                    data: {
                        simpleData: {
                            enable: true
                        }
                    },
                    check: {
                        enable: true,
                        chkboxType: {"Y": "", "N": ""},
                        chkStyle: 'checkbox',
                        radioType: "all"
                    },
                    callback: {
                        onClick: onClick
                        , onCheck: onCheck
                    }
                };
                $.ajax({
                    url: "{% url 'biotime:personnel_department_tree_nodes' %}-1",
                    type: "GET",
                    dataType: "json",
                    success: function (nodes) {
                        zTree = $.fn.zTree.init($("#{{ model_name }}-tree"), setting, nodes);
                    }
                });
            }

            department_tree();

            $("#{{ model_name }}-employee").click(function () {
                $.ajax({
                    url: "/personnel/filter_resign_employee/"
                    , type: "GET"
                    , dataType: "html"
                    , success: function (response) {
                        layer.open({
                            title: gettext("employee_frame_title")
                            , btn: [gettext("btn_confirm"), gettext("btn_cancel")]
                            , area: ['auto', 'auto']
                            , content: response
                            , yes: function (index, layero) {
                                var selectedEmp = $(layero).find("#employee-frame-selected-container").val();
                                var selectedEmpDetail = $(layero).find("#employeeFrameSelectedDetailContainer").val();
                                $("#{{ model_name }}-selected-emp-container").val(selectedEmp);
                                $("#{{ model_name }}-employee").val(selectedEmpDetail);
                                refreshReport('e');
                                layer.close(index);
                            }
                        });
                    }
                });
            });
            $("#{{ model_name }}-dept-tree-control span").click(function () {
                var name = $(this).attr('name');
                if ($(this).hasClass('selected')) {
                    $(this).removeClass('selected');
                    if (name === 'all') {
                        if (zTree.setting.check.chkStyle === 'checkbox') {
                            zTree.checkAllNodes(false);
                            refreshReport('d');
                        }
                    } else if (name === 'mul') {
                        var nodes = zTree.getCheckedNodes(true);
                        zTree.checkAllNodes(false);
                        if (nodes.length > 0) {
                            zTree.checkNode(nodes[0], true, false, true);
                        }
                        zTree.setting.check.chkStyle = 'radio';
                    } else if (name === "sub") {
                        zTree.setting.check.chkboxType = {"Y": "", "N": ""};
                    }
                } else {
                    $(this).addClass('selected');
                    if (name === 'all') {
                        if (zTree.setting.check.chkStyle === 'checkbox') {
                            zTree.checkAllNodes(true);
                            refreshReport('d');
                        }
                    } else if (name === 'mul') {
                        zTree.setting.check.chkStyle = 'checkbox';
                    } else if (name === "sub") {
                        zTree.setting.check.chkboxType = {"Y": "s", "N": "s"};
                    }
                }
                zTree.refresh();
            });
            $("#calculation_show_all").click(function () {
                table.reload(tb.config.id, {where: {}});
                department_tree();
            });

            form.on("submit({{ model_name }}-search)", function (data) {
                refreshReport('');
            });

            table.on('sort({{ model_name }})', function (obj) {
                table.reload('id_grid_{{ model_name }}', {
                    initSort: obj
                        , where: {
                            field: obj.field
                            , order: obj.type
                        }
                });
            });

            $.ajax({
                url: "/att/timeIntervalAlias/"
                , dataType: 'json'
                , type: "GET"
                , success: function (response) {
                    var data = response.data;
                    var options = '<option value="0">----------</option>';
                    data.forEach(function (item) {
                        options += '<option value="' + item[0] + '">' + item[1] + '</option>';
                    });
                    $("#{{ model_name }}RequestTimetable").html(options);
                    form.render();
                }
                , error: function (XMLHttpRequest, textStatus, errorThrown) {
                    console.log(XMLHttpRequest.status);
                }
            });

            $("form.att-report-search-form div.layui-input-inline").css("width", "100px");
        });
    });
</script>